@charset "UTF-8";
.contains{
	width :600px;
	height :300px;
	box-sizing :border-box;
	position :absolute;
	top :25%;
	left :30%;
	border : 5px solid black;
	border-radius :15px;
	transition :ALL 1s;	
}
p.username{
	margin-top :50px;
	margin-left :40px;
	font-size :30px;
}
p.password{
	margin-top :50px;
	margin-left :40px;
	font-size :30px;
}
.text_style{
	border :3px solid black;
	border-radius :15px 5px 5px 15px;
	position :relative;
	left : 20px;
	height :45px;
	width :300px;
	padding-left :15px;
	font-size :23px;
	transition :0.75s;
}
input{
	outline :none;
}
ul{
                list-style-type :none;
                position :absoulute;
                left :0%;
                top :50%;
  
}
.button {
	
	bottom :7%;
	left :40%;
	height :50px;
	width :80px;
	border-radius :20px;
	border :4px solid black;
	background-color :white;
	text-align :center;
	display :inline-block;
	cursor :pointer;
	margin :3px 5px;
	font-size :10px;
}
#draggable{
	position :absolute;
	bottom :7%;
	left :40%;
	height :50px;
	width :80px;
}
.button:hover{
	height:60px;
	width :60px;
	border-radius :40%;
	bottom :8%;
	left :43%;
	font-size :15px;
	transition :1s;
	animation :anime_2 1.75s linear infinite;
}
.button:active{
                color:red;
                box-shadow :0 5px #d7d1be;
                transform :translateY(4px);
                transition :0s;
}
.button:focus{
	outline :none;
}
.contains:hover{
	transition :0.5s;
	animation :anime_1 12s;
	animation-iteration-count:infinite;
	cursor :pointer;
}
input:focus{	
	box-shadow :0 5px #d7d1be;
}
input:hover::placeholder{
	color: rgba(0,0,0,0);
	transition :0.75s;
}
@keyframes anime_1{
	12.5%{
	transform:scale(1.03);
	border :7px solid rgb(255, 0, 0);
	}
	25%{
	height :300px;
	weight :600px;
	border :5px solid #cca63f;
	top :25%;
	left :30%;
	}
	37.5%{
	transform:scale(1.03);
	border :7px solid #7acc3f ;
	}
	50%{
	height :300px;
	weight :600px;
	border :5px solid #3fccb0;
	top :25%;
	left :30%;
	}
	62.5%{
	transform:scale(1.03);
	border :7px solid #35d7df;
	}
	75%{
	height :300px;
	weight :600px;
	border :5px solid #483fcc;
	top :25%;
	left :30%;
	}
	87.5%{
	transform:scale(1.03);
	border :7px solid #cc3f9b;
	}
	100%{
	height :300px;
	weight :600px;
	border :5px solid black;
	top :25%;
	left :30%;
	}
}
@keyframes anime_2{
	100%{transform: rotate(360deg)}
}